import { FormConfig } from '@/components'
import { Row } from '@/components/FTable/components/search'
import { configCurryFilter } from '@/dictionaries/filter'
import { BaseDto } from '@/interfaces'
import { isTrue } from '@/utils/tools'
import dayjs from 'dayjs'
import { shallowRef } from 'vue'
import { UserOutlined } from '@ant-design/icons-vue';
import { RoleState } from '../role/uilts'
/*
 * @Description: 
 * @Author: fhw
 * @Date: 2023-02-23 14:41:28
 */

export interface AdminUserState extends BaseDto {
	/** 用户名称 */
	username?: string
	/** 账号 */
	account?: string
	/** 用户头像 */
	avatar?: string
	/** 是否禁用账号状：0否，1是 */
	status?: number
	/** 密码 */
	password?: string
	/** 角色 */
	roles?: RoleState
}
export const columns: F.TableColumns[] = [
	{
		title: 'id',
		key: 'id',
		dataIndex: 'id',
		align: 'center',
		width: 80,
	},
	{
		title: '用户名称',
		key: 'username',
		dataIndex: 'username',
		align: 'center',
		width: 200,
	},
	{
		title: '账号',
		key: 'account',
		dataIndex: 'account',
		align: 'center',
		width: 200
	},
	{
		title: '角色',
		key: 'roles',
		dataIndex: 'roles',
		align: 'center',
		width: 200,
		customRender: ({ record }: F.RableSlotScope<AdminUserState>) => record.roles?.rolename
	},
	{
		title: '用户头像',
		key: 'avatar',
		dataIndex: 'avatar',
		align: 'center',
		width: 200,
		customRender: ({ record }: F.RableSlotScope<AdminUserState>) => (
			isTrue(record.avatar) ? <a-image
				width={40}
				src={record.avatar}
			/> : <a-avatar shape="square" size="64" v-slots={{ icon: () => <UserOutlined /> }} />
		)
	},
	{
		title: '启用状态',
		key: 'status',
		dataIndex: 'status',
		align: 'center',
		customRender: configCurryFilter('status'),
		width: 200,
	},
	{
		title: '创建时间',
		key: 'createDate',
		dataIndex: 'createDate',
		align: 'center',
		width: 150,
		customRender: ({ record }: F.RableSlotScope<AdminUserState>) => dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss')
	},
	{
		title: '更新时间',
		key: 'updateDate',
		dataIndex: 'updateDate',
		align: 'center',
		width: 150,
		customRender: ({ record }: F.RableSlotScope<AdminUserState>) => dayjs(record.updateDate).format('YYYY-MM-DD HH:mm:ss')
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		align: 'center',
		slots: {
			customRender: 'actionRender',
		},
		width: 200,
		fixed: 'right',
	},
]
export const rows: Array<Row> = [
	{
		title: '用户名称',
		key: 'username',
		component: 'a-input',
	},
	{
		title: '账号',
		key: 'account',
		component: 'a-input',
	},
	{
		title: '启用状态',
		key: 'status',
		component: shallowRef(FormConfig),
		props: {
			prop: 'flag'
		}
	},
	{
		title: '创建时间',
		key: 'createTimeStart',
		component: 'a-range-picker',
		props: {
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
		},
	},
	{
		title: '更新时间',
		key: 'updateTimeStart',
		component: 'a-range-picker',
		props: {
			valueFormat: 'YYYY-MM-DD HH:mm:ss',
		},
	},
]
